import { Rule } from "antd/es/form"
import { FC } from "react"

import { SFormItem } from "@/components/common"
import StyleSelect from "@/components/common/styleSelect"
import { useOptions } from "@/hooks/useOptions"
import { useLocale } from "@/locales"

export type SelectChangeTypeField = {
	merchantId: string
}

interface ISelectChangeType {
	rules?: Rule[]
	disable?: boolean | undefined
	labelProps?: typeof SFormItem.defaultProps
	selectorProps?: any
	width?: number
	label?: string
	placeholder?: string
	labelId?: string
	onChangeValue?: any
	useLabel?: boolean
}
export const SelectChangeTypeSelector: FC<ISelectChangeType & { noClear?: boolean }> = props => {
	const { rules, disable, labelProps, selectorProps, width, placeholder, labelId, onChangeValue, useLabel } = props
	const { formatMessage } = useLocale()
	let options = useOptions({ modal: "updMemberApplyType", func: formatMessage, strictlyLabel: false })
	if (useLabel) {
		options = options.map((item: { label: string; value: string }) => {
			return { ...item, value: item.label }
		})
	}
	return (
		<SFormItem
			name="operationFunc"
			label={`${formatMessage({ id: labelId ? labelId : "member.change_type" })}:`}
			rules={rules}
			{...labelProps}
		>
			<StyleSelect
				onChange={onChangeValue ?? null}
				showSearch
				optionFilterProp="label"
				placeholder={formatMessage({ id: placeholder ? placeholder : "common.select_all" })}
				allowClear={props.noClear ? !props.noClear : true}
				options={options}
				disabled={disable}
				w={width}
				{...selectorProps}
			/>
		</SFormItem>
	)
}
